<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
		<style type="text/css">
			li{
				list-style: none;
				float: left;
			}
			li a{
				height: 35px;
				background: url("bg_r1_c1.png") no-repeat;
				display:inline-block;
				padding-left: 7px;
				color:white;
			}
			li a span{
				height: 35px;
				background: url("bg_r1_c2.png") right;
				display: inline-block;
				padding-right:24px;
				line-height: 35px;
			}
			li a:hover{
				background: url("bbg_r1_c1.png");
			}
			li a:hover span{
				background: url("bbg_r1_c2.png") right;
			}
		</style>
</head>
<body>
	<ul>
		<li>
			<a href="#">
				<span>百度</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span>百度一下</span>
			</a>
		</li>
		<li>
			<a href="#">
				<span>中国新闻网</span>
			</a>
		</li>
	</ul>
</body>
</html>